<template>
	<div class="editMaterial" style="margin-top:0 ;">
		<p>
			<span>物料名称</span>
			<input v-model="materialName" class="materialName" disabled="disabled" />
		</p>
		<p>
			<span>混合物料</span>
			<input v-model="isHunhe" class="isHunhe" disabled="disabled" />
		</p>
		<div class="handBtn" v-if="isHunheShow">
			<div class="handBtnList" v-for="(item,index) in content" :key='index'>
				<p><span>{{item.materialName}}</span><input type="tel" v-model="fixPercent[index]=item.percent"  class="Num" maxlength="2">%</p>
			</div>
		</div>
		<p>
			<span>物料重量</span>
			<input v-model="weight" class="materialNum" style="width: 9rem;" />
			<em>吨</em>
		</p>
		<p>
			<span>物料单位</span>
			<input v-model="unitPrice" class="materialUnit" />
			<em>元/吨</em>
		</p>
		<p>
			<span>含杂比例</span>
			<input v-model="zazhiPercent" class="proportion" />
			<em>%</em>
		</p>
		<div class="demos-content-padded" style="margin-top: 1.5rem;">
			<a href="javascript:;" @click="detelClick" class="weui-btn weui-btn_mini weui-btn_primary delete" style="float: left;margin-top: 0;background: #f65555;">删除</a>
			<a href="javascript:;" @click="modifyClick" class="weui-btn weui-btn_mini weui-btn_primary modify" style="float: right;margin-top: 0;background: #28c81e;">修改</a>
		</div>
	</div>
</template>

<script>
	import {
		getOrderFixMaterialList,
		deleteMaterial,
		addOrEditMaterialChange
	} from '../../config/api'
	export default {
		data() {
			return {
				materialName: this.$route.query.materialName,
				weight: this.$route.query.weight,
				orderNo:this.$route.query.orderNo,
				id: this.$route.query.id,
				unitPrice: this.$route.query.unitPrice,
				zazhiPercent: this.$route.query.zazhiPercent,
				materialNo: this.$route.query.materialNo,
				type: this.$route.query.type,
				isHunhe: '',
				isHunheShow: false,
				content:'',
				fixId:'',
				fixNo:''   ,//混合物料的物料编号集合
				fixPercent:[],
			}
		},
		created() {
			getOrderFixMaterialList(this.id).then(res => {
				if (res.content.length >= 1) {
					this.isHunhe = '是'
					this.isHunheShow = true
					this.content = res.content
					for(let i=0;i<res.content.length;i++){
						this.fixNo += res.content[i].materialNo + ","
						this.fixId += res.content[i].id + ','
					}
				} else {
					this.isHunhe = '否'
					this.isHunheShow = false
				}
			})
		},
		methods: {
			modifyClick(){
				addOrEditMaterialChange(this.id,this.orderNo,this.materialNo,this.weight,this.fixNo,this.fixId,this.fixPercent.join(','),this.unitPrice,this.zazhiPercent).then(res=>{
					console.log(res)
					this.$router.push({
						path:"/materialList",
						query:{
							orderNo:res.orderNo,
							orderid:res.orderid
						}
					})
				})
			},
			detelClick(){
				deleteMaterial(this.id,this.orderNo).then(res=>{
					this.$router.push({
						path:"/materialList",
						query:{
							orderNo:res.orderNo,
							orderid:res.orderid
						}
					})
				})
			}
		},
	}
</script>

<style scoped="scoped" lang="css">
	.handBtn {
		width: 100%;
		height: auto;
		overflow: hidden;
	}

	.handBtn .handBtnList p {
		width: 100%;
		padding: 0 5%;
		height: 2.5rem;
		line-height: 2.5rem;
		font-size: 0.65rem;
	}

	.handBtn .handBtnList p span {
		width: 11rem;
	}

	.handBtn .handBtnList p input {
		border: 1px solid #e2e2e2 !important;
		background-color: #fff;
		width: 3rem;
		font-size: 0.65rem !important;
		padding: 0.1rem 0.3rem;
		box-sizing: border-box;
	}
</style>
